window.addEventListener('DOMContentLoaded', function() {
    var box = this.document.querySelector('.box');
    var ul = this.document.querySelector('.box>ul');
    var le = this.document.querySelector('.le');
    var ri = this.document.querySelector('.ri');
    var pointBox = this.document.querySelector('.pointBox');
    var ul = this.document.querySelector('.box>ul');
    var imges = [
        './images/lun_pic1.png', 
        './images/lun_pic2.png', 
        './images/lun_pic3.png', 
        './images/lun_pic4.png', 
        './images/lun_pic5.png',
    ];
    var imgWi = ul.clientWidth / imges.length;
    for (var i = 0; i < imges.length; i++) {
        // 添加图片
        var newLi = this.document.createElement('li');
        var newImg = this.document.createElement('img');
        newImg.src = imges[i];
        newLi.appendChild(newImg);
        ul.appendChild(newLi);
        console.log(i);
        // 添加圆点
        var newPoint = this.document.createElement('a');
        newPoint.href = 'javascript:;';
        newPoint.className = 'point';
        pointBox.appendChild(newPoint);
    }
    // 所有点
    var points = this.document.querySelectorAll('.point');
    points[0].className = 'pointSel';
    box.addEventListener('touchstart', function() {
        le.style.display = 'none';
        ri.style.display = 'none';
        clearInterval(window.timer);
    })
    box.addEventListener('touchend', function() {
        le.style.display = 'block';
        ri.style.display = 'block';
        setInterval(window.timer, 10);
    })
    var animate = function(obj, moveTo) {
        clearInterval(obj.timer);
        obj.timer = setInterval(() => {
            console.log(moveTo + '*');
            var flag = (moveTo - obj.offsetLeft) / 10;
            flag = flag > 0 ? Math.ceil(flag) : Math.floor(flag);
            obj.style.left = obj.offsetLeft + flag + 'px';
            if (obj.offsetLeft == moveTo) clearInterval(obj.timer);
        }, 120);
    }
    var index = 0;
    this.timer = setInterval(() => {
        index++;
        index %= imges.length;
        animate(ul, -index * imgWi);
        if (!index) ul.style.left = 0 + 'px';
        // console.log(index);
    }, 100);
})